﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>测试bootstrap-fileinput上传功能</title>
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
</head>
<body>
    <div>
        <button id="btn_import" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-import" aria-hidden="true"></span>导入
        </button>
    </div>

    <form>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">请选择Excel文件</h4>
                    </div>
                    <div class="modal-body">
                        <a href="~/Data/ExcelTemplate/Order.xlsx" class="form-control" style="border:none;">下载导入模板</a>
                        <input type="file" name="file" id="uploadFile" multiple class="file-loading" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script src="~/Content/webuploader/jquery-2.2.3.min.js"></script>
    <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/Content/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="~/Content/bootstrap-fileinput/js/locales/zh.js"></script>
    <script>
        $(function () {
            $("#uploadFile").fileinput({
                language: 'zh', //设置语言
                uploadUrl: "/TestUpload/UpLoadProcess", //上传的地址
                uploadExtraData: { addressKey: 1, callBack: "Account/ImportAccountData" },//上传附加form值
                //allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                //allowedFileTypes: ['image', 'html', 'text', 'video', 'audio', 'flash', 'object'],//允许的文件类型
                showUpload: true, //是否显示上传按钮
                showCaption: true,//是否显示标题
                showPreview: true,//是否显示预览，上传文件不需要，上传图片可以使用
                showRemove: true,//默认true,是否显示移除按钮
                browseClass: "btn btn-primary", //按钮样式
                //dropZoneEnabled: false,//是否显示拖拽区域
                //minImageWidth: 50, //图片的最小宽度
                //minImageHeight: 50,//图片的最小高度
                //maxImageWidth: 1000,//图片的最大宽度
                //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                //minFileCount: 0,
                maxFileCount: 10, //表示允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
                //,initialPreview: //预览初始化窗口时显示的图片或文件
            });
            //导入文件上传完成之后的事件
            $("#uploadFile").on("fileuploaded", function (event, data, previewId, index) {
                $("#myModal").modal("hide");
                alert(data.response);
            });
            $("#btn_import").click(function () {
                $("#myModal").modal();
            });
        });
    </script>

</body>
</html>
